<!DOCTYPE html>

<script src="../../resources/js-test.js"></script>

<div id="mutator"></div>

<script>
description("Element APIs should not force layout for nodes not in the active document.");

var testStatements = [
    'element.scrollIntoView()',
    'element.scrollIntoViewIfNeeded()',
    'element.offsetLeft',
    'element.offsetTop',
    'element.offsetWidth',
    'element.offsetHeight',
    'element.offsetParent',
    'element.clientLeft',
    'element.clientTop',
    'element.clientWidth',
    'element.clientHeight',
    'element.scrollLeft',
    'element.scrollTop',
    'element.scrollLeft = 10',
    'element.scrollTop = 10',
    'element.scrollBy({left: 10, top: 10})',
    'element.scrollBy(10, 10)',
    'element.scrollTo({left: 10, top: 10})',
    'element.scrollTo(10, 10)',
    'element.getClientRects()',
    'element.getBoundingClientRect()',
    'element.focus()',
    'element.innerText',
    'element.innerText = "innerText value"',
    'getComputedStyle(element).color',
    'getComputedStyle(element).width',
    'getComputedStyle(element).fontSize',
];

var mutator = document.getElementById("mutator");
var element = document.createElement("div");
var causedRecalc = false;
for (var i = 0; i < testStatements.length; ++i) {
    var statement = testStatements[i];
    mutator.offsetTop;
    // Make the mutator's style dirty.
    mutator.style.flexGrow = i;
    eval(statement);
    // The mutator element should still be dirty.
    if (internals.updateStyleAndReturnAffectedElementCount() != 1) {
        causedRecalc = true;
        testFailed(statement + " caused a style or layout update.");
    }
}
if (!causedRecalc)
    testPassed("No style or layout updates.");
</script>
